<template>
  <div class="cuskeyboard" :style="cssStyle">
    <div class="keyboardcon">

      <!--      数字键盘-->
      <div class="number">
        <div
          :class="active==index?'numberitem changecolor':'numberitem'"
          v-for="(item,index) in lists"
          :key="index"
          @click="choosekey(item,index)"
        >
          <!--          这里判断是否为最后一个，如果是就字体就变小一点，？？？-->
          <!--          <span :class="index==lists.length-1?'numspan textspan':'numspan'">{{item.label}}</span>-->
          <span class="numspan">{{item.label}}</span>
        </div>
      </div>

      <div class="operate">
        <!--退格键-->
        <!--        点击时样式-->
        <div :class="active==-1?'operateitem changecolor':'operateitem'" @click="rebacking">
          <span class="raback"></span>
        </div>

        <!--        确定键-->
<!--        <div :class="active==-2? 'operateitem sureitem subchange':'operateitem sureitem'" @click="makesure">-->
        <div class="operateitem sureitem" @click="makesure">
          <span class="flexcenter">记账</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'cal',
    data() {
      return {
        lists: [{
          value: 1,
          label: '1'
        }, {
          value: 2,
          label: '2'
        }, {
          value: 3,
          label: '3'
        }, {
          value: 4,
          label: '4'
        }, {
          value: 5,
          label: '5'
        }, {
          value: 6,
          label: '6'
        }, {
          value: 7,
          label: '7'
        }, {
          value: 8,
          label: '8'
        }, {
          value: 9,
          label: '9'
        }, {
          value: 10,
          label: '0'
        }, {
          value: 11,
          label: '.'
        },
        ],
        num: [],
        isEnd: false,
        cssStyle: {
          'display': 'block'
        },
        active: null,
      }
    },
    // props: ['value', 'end', 'pattern', 'type'],
    props:{
        value:{
            type:String,
            default:''
        },
        end:{
            type:Boolean,
            default:false
        },
        type:{
            type:Boolean,
            default:false
        }
    },
    //初始值，是否显示键盘，背景颜色？是否开启整数
    computed: {},
    watch: {
      value(val) {
        this.init();
      },
      end(val) {
        this.init();
      },
    //   pattern(val) {
    //     this.init();
    //   },
      type(val) {

      }
    },
    methods: {
      // 拿到点击的那个键的值
      choosekey(item, index) {
        //点击样式
        let _this = this;
        _this.active = index;
        setTimeout(() => {
          _this.active = null;
        }, 100);
        //value为12弹出事件
        if (item.value == 12) {
          _this.$emit('closekeyboard', _this.num);
        } else {
          // console.log(_this.type)
          if (_this.type) {
            // console.log(item.value != 10)
            if (item.value != 10) {
              _this.num.push(item.label);
              if (!_this.checkNum()) {
                let arr = _this.num;
                let len = arr.length;
                arr.splice(len - 1, 1);
                _this.num = arr;
                console.log(_this.num)
                return;
              }
              _this.$emit('changekey', _this.num);
            }
          } else {
            //小于设定的总数时候就添加，
            if (_this.num.length < 8) {   // 这里的 6 表示最多能输入6位数
              _this.num.push(item.label);
              // console.log(_this.num)
            }
            //   console.log('this.num--->',this.num)
            //非数字执行,如果传进num数组的不是数字，就把他删掉
            if (!_this.checkNum()) {
              let arr = _this.num;
              let len = arr.length;
              arr.splice(len - 1, 1);
              _this.num = arr;
              return;
            }
            //是数字执行
            _this.$emit('changekey', _this.num);
          }
        }
      },
      checkNum() {
        //正常数字校验
        let str = /^(\-)?\d+(\.\d{1,3})?$/;
        let number = (this.num.join('')) + '0';
        let status = true;
        //正则的test方法用于检测字符串是否匹配该正则
        status = str.test(number);
        // console.log('checkNume', status);
        // console.log(number)
        return status;
      },
      //初始化
      init() {
        if (this.value) {
          let value = this.value.toString();
          this.num = value.split('');
        } else {
          this.num = [];
        }
        this.isEnd = this.end;
        // this.cssStyle = this.pattern;
      },

      //点击退格键触发
      rebacking() {
        //截取数组最后一位,
        //删除最后以为元素
        this.active = -1
        setTimeout(() => {
          this.active = null
        }, 100)
        if (this.num.length > 0) {
          let num = this.num.filter(function (ele, idx, arr) {
            return arr.length - 1 !== idx;
          });
          this.num = num;
          // this.num.pop()
        } else {
          this.num = [];
        }
        this.$emit('changekey', this.num);
      },
      // 确定
      makesure() {
        event.stopPropagation();
        this.$emit('makesure', this.num);
        this.clearNum()
      },
      clearNum(){
        this.num = []
      }
    },
    mounted() {
    }
  }

</script>

<style scoped>
  /*总样式*/
  .cuskeyboard {
    /*width: 100%;*/
    /*position: fixed;*/
    /*bottom: 55px;*/
    /*left: 0;*/
    user-select: none;
  }

  /*键盘样式*/
  .cuskeyboard .keyboardcon {
    position: fixed;
    bottom: 55px;
    left: 0;
    width: 100%;
    display: flex;
  }

  /*数字键盘*/
  .cuskeyboard .keyboardcon .number {
    width: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .cuskeyboard .keyboardcon .number .numberitem {
    height: 2.64533333rem;
    box-sizing: border-box;
    border-top: 4px solid #F4F4F4;
    border-right: 4px solid #F4F4F4;
    width: 33.3%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cuskeyboard .keyboardcon .number .numberitem:nth-of-type(1) {
    border-top: 7px solid #F4F4F4;
    border-left: 7px solid #F4F4F4;
  }

  .cuskeyboard .keyboardcon .number .numberitem:nth-of-type(2) {
    border-top: 7px solid #F4F4F4;
  }

  .cuskeyboard .keyboardcon .number .numberitem:nth-of-type(3) {
    border-top: 7px solid #F4F4F4;
  }

  .cuskeyboard .keyboardcon .number .numberitem:nth-of-type(4) {
    border-left: 7px solid #F4F4F4;
  }

  .cuskeyboard .keyboardcon .number .numberitem:nth-of-type(7) {
    border-left: 7px solid #F4F4F4;
  }

  .cuskeyboard .keyboardcon .number .numberitem:nth-of-type(10) {
    width: 66.6%;
    border-bottom: 7px solid #F4F4F4;
    border-left: 7px solid #F4F4F4;
  }

  .cuskeyboard .keyboardcon .number .numberitem:nth-of-type(11) {
    border-bottom: 7px solid #F4F4F4;
  }

  .cuskeyboard .keyboardcon .number .numberitem .numspan {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.024rem;
  }

  .cuskeyboard .keyboardcon .number .numberitem .textspan {
    font-size: 0.768rem;
  }

  .cuskeyboard .keyboardcon .operate {
    width: 25%;
  }

  .cuskeyboard .keyboardcon .operate .operateitem {
    width: 100%;
    height: 2.64533333rem;
    box-sizing: border-box;
    border-top: 7px solid #F4F4F4;
    border-right: 7px solid #F4F4F4;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cuskeyboard .keyboardcon .operate .operateitem .raback {
    background: url("../../assets/img/reback.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 1.152rem;
    display: block;
    height: 0.768rem;
  }

  /*.cuskeyboard .keyboardcon .operate .operateitem .raback {*/
  /*  height: 0.768rem;*/
  /*}*/
  .cuskeyboard .keyboardcon .operate .nextitem {
    background: #F79825;
    border: none;
  }

  .cuskeyboard .keyboardcon .operate .sureitem {
    background-color: #5DABF3;
    border-top: 7px solid #F4F4F4;
    border-right: 7px solid #F4F4F4;
    border-bottom: 7px solid #F4F4F4;
    height: 8.064rem;
  }
  .sureitem:active{
    opacity: .7;
  }

  .cuskeyboard .keyboardcon .operate .flexcenter {
    color: #ffffff;
    font-size: 0.768rem;
  }

  /*// 触发某个键时的颜色*/
  .changecolor {
    /*background-color: #D7D7D7;*/
    background-color: #5DABF3;
  }

  .subchange {
    background-color: blue;
  }

</style>
